<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>课程列表</span>
      </div>
    </template>
    <div class="card-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column prop="name" label="课程名称" width="180" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column label="课程状态">
          <template #default="scope">
            <el-switch v-model="scope.row.visible" @click="switchType(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          
          <template #default="scope">
            <el-button size="small" :icon="Edit" @click="operate(scope.row, 1)" />
            <el-button size="small" :icon="List" @click="operate(scope.row, 2)" />
            <el-button size="small" :icon="Notebook" @click="operate(scope.row, 3)" />
            <el-button size="small" :icon="Shop" @click="operate(scope.row, 4)" />
          </template>
          
          
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script setup>
import { Shop, Edit, List, Notebook } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
const tableData = [
  {
    id: 1,
    name: "JAVA程序设计 ",
    create_time: "2020-12-12",
    visible: true
  },
  {
    id: 2,
    name: "MySQL数据库设计 ",
    create_time: "2020-12-12",
    visible: false
  },
  {
    id: 3,
    name: "Web前端开发基础",
    create_time: "2020-12-12",
    visible: true
  },
  {
    id: 4,
    name: "Web前端项目实践 ",
    create_time: "2020-12-12",
    visible: true
  },
]
// const goEdit = (id) => {
//   console.log(id)
// }
const operate = (item, type) => {
  if(type === 1) {
    ElMessage.success(`${item.name}现在是编辑操作`)
  } else if(type === 2) {
    ElMessage.success(`${item.name}正在资源管理`)
  }
  else if(type === 3) {
    ElMessage.success(`${item.name}正在资源编排`)
  }
  else if(type === 4) {
    ElMessage.success(`${item.name}开课`)
  }
}

const switchType = (row) => {
  if(row.visible) {
    ElMessage.success('现在课程可见')
  } else {
    ElMessage.error('现在课程不可见')
  }
}
</script>


<style>
.card-header {
  text-align: left;
}
</style>